@import './variables.scss';
@import './mixin.scss';
@import './transition.scss';
@import './element-ui.scss';
@import './sidebar.scss';
@import './btn.scss';

body {
  height: 100%;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
}
ul{
  margin: 0;padding: 0
}
ul li {
  list-style: none;
}

label {
  font-weight: 700;
}

html {
  height: 100%;
  box-sizing: border-box;
}

#app{
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

.no-padding {
  padding: 0px !important;
}

.padding-content {
  padding: 4px 0;
}

a:focus,
a:active {
  outline: none;
}

a,
a:focus,
a:hover {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

div:focus{
  outline: none;
 }

.fr {
  float: right;
}

.fl {
  float: left;
}

.pr-5 {
  padding-right: 5px;
}

.pl-5 {
  padding-left: 5px;
}

.block {
  display: block;
}

.pointer {
  cursor: pointer;
}

.inlineBlock {
  display: block;
}

.clearfix {
  &:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
  }
}

code {
  background: #eef1f6;
  padding: 15px 16px;
  margin-bottom: 20px;
  display: block;
  line-height: 36px;
  font-size: 15px;
  font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
  a {
    color: #337ab7;
    cursor: pointer;
    &:hover {
      color: rgb(32, 160, 255);
    }
  }
}

.warn-content{
  background: rgba(66,185,131,.1);
  border-radius: 2px;
  padding: 16px;
  padding: 1rem;
  line-height: 1.6rem;
  word-spacing: .05rem;
  a{
    color: #42b983;
    font-weight: 600;
  }
}

//main-container全局样式
.app-container {
  //padding: 20px;
  //border: 1px solid #eee;
  margin: 20px 20px 0 20px;
}

.components-container {
  margin: 30px 50px;
  position: relative;
}

.pagination-container {
  margin-top: 30px;
  text-align: center;
}

.text-center {
  text-align: center
}

.sub-navbar {
  height: 50px;
  line-height: 50px;
  position: relative;
  width: 100%;
  text-align: right;
  padding-right: 20px;
  transition: 600ms ease position;
  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
  .subtitle {
    font-size: 20px;
    color: #fff;
  }
  &.draft {
    background: #d0d0d0;
  }
  &.deleted {
    background: #d0d0d0;
  }
}

.link-type,
.link-type:focus {
  color: #337ab7;
  cursor: pointer;
  &:hover {
    color: rgb(32, 160, 255);
  }
}

.filter-container {
  padding-bottom: 10px;
  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }
}

.filter-left {
  float:left;
  width:80%;
}

.filter-right {
  float: right;
  text-align:center;
  width:20%;
}
.text-alignL{
  text-align: left;
}
//refine vue-multiselect plugin
.multiselect {
  line-height: 16px;
}

.multiselect--active {
  z-index: 1000 !important;
}

// 分页样式
.block {
  margin: 20px 0;
  text-align: center
}

// el-form-item 提示文本
.el-form-tip {
  margin-left: 10px;
  color: #909399;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.fl {
  float: left;
}
.fr {
  float: right;
}
	h3 em{
		padding: 0 5px;
		font-style: normal;
	}
	h3 em:hover{
		color: #0E90D2;
	}
	.font-size16{
		font-size: 16px;
	}
	.fixTitle{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		position: fixed;
		width: 500px;
		line-height: 36px;
		padding: 0 10px;
		z-index: 110;
	}
	.fixTitle p{
		position: absolute;
		right: 20px;
		top: 0px;
	}
	.filter {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.3);
		position: fixed;
		left: 0;
		top: 0;
		z-index: 100;
  }
  .text-c {
    text-align: center;
  }

  // 搜索讲师的样式
  .my-autocomplete {
    width: 600px;
    li {
      line-height: normal;
      padding: 7px;

      .name {
        text-overflow: ellipsis;
        overflow: hidden;
      }
      .headImg {
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        font-size: 12px;
        overflow: hidden;
        margin: 0 10px;
        vertical-align: middle;
        img {
          width: 100%;
          height: 100%;
        }
      }

      .highlighted .addr {
        color: #ddd;
      }
    }
  }

  p{
    margin: 0;
  }
  .c-f img {
    vertical-align: middle;
  }

  .c-mh16{
    margin: 16px 0;
  }
  .c-mb10{
    margin-bottom: 10px;
  }
  .c-textAlign-l{
    text-align: left;
  }
  .c-textAlign-c{
    text-align: center;
  }
  .c-textAlign-r{
    text-align: right;
  }
  .checkMore{
    font-size:12px;
    color:blue;
  }
button.search,button.search:focus {
  color: #fff;
  background-color:#304156;
  border:none;
}

button.search:hover {
  color: #fff;
  background-color: #304156;
}
b{
  cursor: pointer;
  font-weight: 500;
}
b:hover{
  color: #46a0fc;
}
.margin-l20 {
  margin-left: 20px;
}
.margin-l10{
  margin-left: 10px;
}
.margin-r10{
  margin-right: 10px;
}
.c-mv15{ margin-top:15px;margin-right:15px; }
.fc {
  color: #878d99;
}
.b-c{
  background-color: #f7f8fa;
}
.color-ff3b3b{
  color: #ff3b3b;
}
.color-b{
  color: #bbb;
}
.color-35 {
  color: #353535;
}
.color-8 {
  color: #888;
}
.color-10{
  color: #101010;
}
.font-family-h{
  font-family: SimHei;
}
.font-bold {
  font-weight: bold;
}
.font-s22 {
  font-size: 22px;
}
.font-s20 {
  font-size: 20px;
}
.font-s16 {
  font-size: 16px;
}
.font-s14 {
  font-size: 14px;
}
.font-s12 {
  font-size: 12px;
}
.font-s10 {
  font-size: 10px;
}
.weight{
  font-weight:normal;
}
.text-center {
  text-align: center;
}
.visibility-hidden{
  visibility: hidden;
}

.c-flex-row{display:flex; display: -webkit-flex; flex-direction: row; -webkit-flex-direction: row;}
.c-flex-column{display:flex;display: -webkit-flex;flex-direction: column; -webkit-flex-direction: column;}
.c-flex-rowRe{display:flex; display: -webkit-flex; flex-direction: row-reverse; -webkit-flex-direction: row-reverse;}
.c-flex-columnRe{display:flex;display: -webkit-flex;flex-direction: column-reverse; -webkit-flex-direction: column-reverse;}
.c-flexw-wrap{flex-wrap:wrap;-webkit-flex-wrap:wrap;}
.c-alignc-end{align-content:flex-end; -webkit-align-content:flex-end;}
.c-alignc-center{align-content:center; -webkit-align-content:center;}
.c-alignc-start{align-content:flex-start; -webkit-align-content:flex-start;}
.c-alignc-sb{align-content:space-between; -webkit-align-content:space-between;}
.c-alignc-sa{align-content:space-around; -webkit-align-content:space-around;}
.c-alignc-stretch{align-content:stretch; -webkit-align-content:stretch;}
.c-aligni-center{align-items:center; -webkit-align-items:center;}
.c-aligni-start{align-items:flex-start; -webkit-align-items:flex-start;}
.c-aligni-end{align-items:flex-end; -webkit-align-items:flex-end;}
.c-aligni-baseline{align-items:baseline; -webkit-align-items:baseline;}/*项目的第一行文字的基线对齐。*/
.c-aligni-stretch{align-items:stretch; -webkit-align-items:stretch;}/*如果项目未设置高度或设为auto，将占满整个容器的高度*/
.c-justify-sa{justify-content:space-around; -webkit-justify-content:space-around;}/*每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。*/
.c-justify-sb{justify-content:space-between; -webkit-justify-content:space-between;}/*两端对齐，项目之间的间隔都相等。*/
.c-justify-center{justify-content:center; -webkit-justify-content:center;}
.c-justify-start{justify-content:flex-start; -webkit-justify-content:flex-start;}
.c-justify-end{justify-content:flex-end; -webkit-justify-content:flex-end;}
.c-inline-flex{display: inline-flex; display: -webkit-inline-flex;}
.c-flex-grow1{flex-grow:1; -webkit-flex-grow:1;}
.c-flex-center{align-items:center; -webkit-align-items:center;justify-content:center; -webkit-justify-content:center;}
.c-cursor-p{cursor: pointer;}
.c-width0{width:0;}
.c-width10{width:10%;}
.c-width15{width:15%;}
.c-width12{width:12%;}
.c-width20{width:20%;}
.c-width30{width:30%;}
.c-width60{width:60%;}
.c-width50{width:50%;}
.c-width30{width:30%;}
.c-width40{width:40%;}
.c-width70{width:70%;}
.c-width75{width:75%;}
.c-width80{width:80%;}
.c-width90{width:90%;}
.c-width100{width:100%;}
.c-width6-10{width:16.66667%}
.c-height100{
  height: 100%;
}
.center{text-align:center;}
.padding20{padding:20px;}
.padding-tb20{padding:20px 0;}
.padding-lr60{padding: 0 60px;}
.padding10{padding: 10px;}
.blue {color: #00a3ff;}
.ib{display:inline-block;}

.width80{width:80px;}
.width10{width:10px;}
.width36{width:36px;}
.width38{width:38px;}
.width40{width:40px;}
.width48{width:48px;}
.width50{width:50px;}
.width60{width:60px;}
.width100{width:100px;}
.width110{width:110px;}
.width120{width:120px;}
.width130{width:130px;}
.width150{width:150px;}
.width160{width:160px;}
.width180{width:180px;}
.width200{width:200px;}
.width220{width:220px;}
.width250{width:250px;}
.width270{width:270px;}
.width290{ width:290px; }
.width300{ width:300px; }
.width400{width:400px;}
.width650{ width: 650px; }

.height10 {height:10px;}
.height36 {height:36px;}
.height38 {height:38px;}
.height40 {height:40px;}
.height48 {height:48px;}
.height50 {height:50px;}
.height120 {height:120px;}
.height250 {height:250px;}
.height280 {height:280px;}
.height300 {height:300px;}
.height350 {height:350px;}
.height400 {height:400px;}
.height450 {height:450px;}

.c-max-height60 { max-height: 60px; }
.c-max-width150 { max-width: 150px; }

.c-verticalAlign-m{ vertical-align: middle; }

.border-radio4{border-radius: 4px;}

.border{border:1px solid #ccc;}

.border0{border:0}
.border-d{border:1px dashed #ccc;}
.border-b{border-bottom:1px solid #ccc;}
.border-l{border-left:1px solid #ccc;}
.border-t{border-top:1px solid #ccc;}
.border-r{border-right:1px solid #ccc;}
.c-bd1-eee{ border: 1px solid #eee; }
.border-409{
  border: 1px solid #409eff;
  border-radius: 5px;
}
.center{text-align:center;}
.right{text-align:right;}

.margin0{ margin: 0; }
.margin-r5{
  margin-right: 5px;
}
.margin-l{margin-left: 20px;}
.margin-r{margin-right: 20px;}
.margin-r10{margin-right: 10px;}
.margin-l10{margin-left: 10px;}
.margin-r30{margin-right: 30px;}
.margin-r40{margin-right: 40px;}
.margin-r50{margin-right: 50px;}
.margin-r5{ margin-right: 5px; }
.margin-t{margin-top: 20px;}
.margin-t10{margin-top: 10px;}
.margin-t30{margin-top: 30px;}
.margin-t36{margin-top: 36px;}
.margin-t40{margin-top: 40px;}
.margin-l50{margin-left: 50px;}
.margin-l70{margin-left: 70px;}
.margin-t50{margin-top: 50px;}
.margin-b40{margin-bottom: 40px;}
.margin-t10{margin-top: 10px;}
.margin-b12{margin-bottom: 12px;}
.margin-b{margin-bottom: 20px;}
.margin-b30{margin-bottom: 30px;}
.margin-b10{margin-bottom: 10px;}
.margin-t60{margin-top:60px;}
.c-mv30{ margin-top: 30px; margin-bottom: 30px; }
.c-mv20{ margin-top: 20px; margin-bottom: 20px; }
.c-mv10{ margin-top: 10px; margin-bottom: 10px; }
.c-mh5{ margin-left: 5px; margin-right: 5px; }
.c-mh10{ margin-left: 10px; margin-right: 10px; }
.margin-0auto{ margin: 0 auto }
.c-mt-f3{ margin-top: -3px; }

.padding-l{padding-left: 20px;}
.padding-l6{padding-left: 6px;}
.padding-l10{padding-left: 10px;}
.padding-l12{padding-left: 12px;}
.padding-l20{padding-left: 20px;}
.padding-r20{padding-right: 20px;}
.padding-l28{padding-left: 28px;}
.padding-l30{padding-left: 30px;}
.padding-r10{padding-right: 10px;}
.padding-r30{padding-right: 30px;}
.padding-tb10{padding-top:10px;padding-bottom: 10px;}
.padding-b10{padding-bottom: 10px;}
.padding-b20{padding-bottom: 20px;}
.padding-b30{padding-bottom: 30px;}
.padding-b40{padding-bottom: 40px;}
.padding-t20{padding-top: 20px;}
.padding-t40{padding-top: 40px;}
.padding-t60{padding-top: 60px;}
.padding-tb20{padding-top:20px;padding-bottom: 20px;}
.c-pv30{padding-top:30px;padding-bottom: 30px;}
.c-pv20{padding-top:20px;padding-bottom: 20px;}
.c-ph20{ padding-left: 20px; padding-right: 20px; }
.c-ph10{ padding-left: 10px; padding-right: 10px; }
.c-ph30{ padding-left: 30px; padding-right: 30px; }
.padding8-5{
  padding: 8px 5px;
}
.line36 {line-height: 36px;}
.c-line-18{ line-height: 18px; }

.c-text-ellipsis3{display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;}
.c-text-ellipsis1{text-overflow:ellipsis; overflow: hidden; white-space: nowrap;}

.c-fc-red{ color: red; }
.c-fc-blue{ color: #409EFF; }
.c-fc-deepskyblue{ color: deepskyblue; }
.c-fc-xgray{ color: #666; }
.c-fc-white{ color: #fff; }

.c-fs-28{ font-size: 28px; }

.c-vm-m{ vertical-align: middle; }

.c-overflow-h{ overflow: hidden; }
.c-overflow-auto{ overflow: auto; }

b{
  color: #409EFF;
  // padding: 0 10px;
  cursor: pointer;
  font-size: 14px;
}
b:hover{
  color: #409EFF;
}
.color-409{
  color: #409EFF;
  padding: 0 5px 0 8px;
}
.color-97{
  color: #979797;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.bg-dd{
  background-color: #d8dadd;
}
.color-222{
  color: #222;
}
.color-333{
  color: #333;
}
.color-5c6 {
  color: #5c6065;
}
.color-999{
  color: #999;
}
.color-ff3b3b {
  color: #ff3b3b;
}
.family-PingFangSC-Regular{
  font-family: PingFangSC-Regular
}
.family-PingFangSC-Semibold{
  font-family: PingFangSC-Semibold;
}
.square {
display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #409eff;
  margin-right: 10px;
}
.width110 {
  width: 110px;
}
.point {
  color: red;
  font-size: 10px;
}
.c-bd1-eee{
  border: 1px solid #eee;
}
.point {
  color:#999;
  font-size:12px;
}
.img img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  vertical-align:middle;
}
.line-limit-length {
  width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-limit-length-130 {
  width: 130px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-limit-length-200 {
  width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-limit-length-240 {
  width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-limit-length-250 {
  width: 250px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-limit-length-180 {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.line-limit-length-110 {
  width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bg-f5f7fa{
  background-color: #f5f7fa;
}
.lineh0{
  line-height: 0;
}
.type {
  padding: 0 5px;
  border: 1px solid #409EFF;
  border-radius: 5px;
}
.text-decoration-line-through {
  text-decoration: line-through;
}
.radius-50{
  border-radius: 50%;
  vertical-align: middle;

}
